<template>
  <el-dialog
    title="缴费开单"
    width="680px"
    :visible="value"
    @close="handleClose"
  >
    <el-form inline>
      <el-form-item label="开单TC">{{ data.yiyaBillingMain.tc }}</el-form-item>
    </el-form>
    <el-table border stripe :data="data.yiyaItemBillingExtends">
      <el-table-column
        label="项目名称"
        prop="itemName"
        align="center"
        min-width="160"
      ></el-table-column>
      <el-table-column
        label="医生"
        prop="doctor"
        align="center"
      ></el-table-column>
      <el-table-column
        label="应收金额（元）"
        min-width="100"
        prop="owingPrice"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="缴费分配"
        prop="thisPay"
        align="center"
        min-width="100"
      >
        <el-input
          slot-scope="scope"
          :value="scope.row.thisPay"
          @input="handleThisPayInput($event, scope.row)"
          @blur="handleThisPayBlur(scope.row)"
        ></el-input>
      </el-table-column>
      <el-table-column label="欠费金额" prop="newOwingPrice" align="center">
        <span slot-scope="scope" style="color: red">
          {{ scope.row.newOwingPrice }}
        </span>
      </el-table-column>
    </el-table>
    <el-card class="mt20" shadow="never" :body-style="{ paddingBottom: 0 }">
      <el-form inline>
        <el-form-item label="应收金额">
          {{ owingPrice }}
        </el-form-item>
        <el-form-item label="缴费">
          {{ thisPay }}
        </el-form-item>
        <el-form-item label="欠费" style="color: red">
          {{ newOwingPrice }}
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="mt20" shadow="never" :body-style="{ paddingBottom: 0 }">
      <el-form inline>
        <el-form-item label="备注">
          <el-input
            v-model="remarks"
            style="width: 500px"
            :autosize="{ minRows: 4, maxRows: 8 }"
            type="textarea"
            placeholder="请输入内容"
          >
          </el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <template slot="footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button
        type="primary"
        :loading="loading"
        :disabled="thisPay === '0.00'"
        @click="handleSubmit"
      >
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
import { againBilling } from '@/api/services/billingMain'
import { billingTypeEnum } from '@/utils/enums'

export default {
  name: 'PaymentOrder',
  model: {
    prop: 'value',
    event: 'close',
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: false,
      remarks: '',
    }
  },
  computed: {
    ...mapState({
      userName: (state) => state.user.name,
    }),
    owingPrice() {
      return this.data.yiyaItemBillingExtends
        .reduce((total, { owingPrice }) => total + +owingPrice, 0)
        .toFixed(2)
    },
    thisPay() {
      return this.data.yiyaItemBillingExtends
        .reduce((total, { thisPay }) => total + +thisPay, 0)
        .toFixed(2)
    },
    newOwingPrice() {
      return (+this.owingPrice - +this.thisPay).toFixed(2)
    },
  },
  watch: {
    value(val) {
      if (val) {
        this.init()
      }
    },
  },
  methods: {
    init() {
      this.data.yiyaItemBillingExtends = this.data.yiyaItemBillingExtends.map(
        (item) => {
          return {
            ...item,
            thisPay: '0',
            newOwingPrice: item.owingPrice,
          }
        }
      )
    },
    handleClose() {
      this.$emit('close', false)
    },
    handleThisPayInput(e, project) {
      if (e.length > 9 || isNaN(+e)) {
        return
      }
      project.thisPay = e || 0
    },
    handleThisPayBlur(project) {
      const thisPay = Math.min(+project.owingPrice, +project.thisPay)
      const newOwingPrice = +project.owingPrice - thisPay
      project.thisPay = thisPay.toFixed(2)
      project.newOwingPrice = newOwingPrice.toFixed(2)
    },
    async handleSubmit() {
      try {
        this.loading = true
        const { id } = this.data.yiyaBillingMain
        const formData = {
          billingPerson: this.userName,
          thisPay: this.thisPay,
          type: billingTypeEnum['还欠款'],
          billingRemarks: this.remarks,
          arrearageChange: this.thisPay,
          personArrearage: this.newOwingPrice,
          yiyaBillingMain: {
            id,
          },
          yiyaItemBillingExtends: this.data.yiyaItemBillingExtends.map(
            (item) => {
              return {
                id: item.id,
                thisPay: item.thisPay,
                storedDeductPrice: 0,
              }
            }
          ),
        }
        await againBilling(formData)
        this.msgSuccess('开单成功')
        this.handleClose()
        this.$emit('ok')
      } finally {
        this.loading = false
      }
    },
  },
}
</script>

<style scoped></style>
